import React, { Component, useEffect, useState, useRef, useLayoutEffect } from 'react'
import withControl from 'utils/withControl'
import { Button } from 'antd-mobile'

/**
 * useEffect是处理副作用操作的函数，（副作用：http请求，定时器，事件订阅---异步）
 * useEffect 会从上往下，以同步的方式去执行
 * useEffect 如果没有依赖数组，相当于update生命周期，每次渲染都会更新
 * useState往往和useEffect结合在一起使用
 * useEffect不会参与页面渲染，会在render执行结束之后执行
 *
 */

const createData = (time = 500) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ code: 0, msg: 'success' })
    }, time)
  })
}

const Cart = () => {
  const [count, setCount] = useState(0)

  const onClick = () => {
    setCount((count) => count + 1)
  }
  useEffect(() => {
    console.log('useEffect-----1')
    const fetchData = async () => {
      const res = await createData(1000)
      console.log('res:', res)
      console.log('useEffect-数组-1')
    }
    fetchData()
  }, [])

  useEffect(() => {
    console.log('useEffect-----2')
    const fetchData = async () => {
      const res = await createData(1001)
      console.log('res:', res)
      console.log('useEffect-数组-2')
    }
    fetchData()
  }, [])
  useEffect(() => {
    console.log('useEffect-----3')
    const fetchData = async () => {
      const res = await createData(100)
      console.log('res:', res)
      console.log('useEffect-数组-3')
    }
    fetchData()
  }, [count])
  // useLayoutEffect(() => {
  //   console.log('useLayoutEffect-------2')
  // }, [])
  return (
    <div>
      cart
      <Button onClick={onClick}>
        <h1>{count}</h1> 按钮
      </Button>
    </div>
  )
}

export default withControl(Cart)
